<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
			
<link href="static/css/circles.css" rel="stylesheet" type="text/css" media="all" /><!-- circles-css --><!-- for skills section-->
		
<link href="static/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<link href="static/css/font-awesome.css" rel="stylesheet">
<link href="static/css/style000.css" rel="stylesheet" type="text/css" media="all" />
	
	<!-- light-box -->
	<link rel="stylesheet" href="static/css/poposlides.css">
	<!-- //light-box -->

<!--fonts-->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&amp;subset=latin-ext,vietnamese" rel="stylesheet">
<!--//fonts-->

</head>
<body>
<!-- banner -->
<div class="main_agileits">
		<div class="agile_wthree_nav">
			<nav class="navbar navbar-default">
				<div class="navbar-header navbar-left">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					<h1><a class="navbar-brand" href=""><span><i class="fa fa-heartbeat" aria-hidden="true"></i></span>PATHOLOGY</a></h1>
				</div>
				<!-- Collect the nav links, forms, and other content for toggling -->

				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<nav class="link-effect-8" id="link-effect-8">
						<ul class="nav navbar-nav">
							<li class="active"><a href="http://118.25.74.160/">Home</a></li>
							<li><a href="#about" class="scroll">Details</a></li>
							<li><a href="#services" class="scroll">Questions</a></li>
							<li><a href="#team" class="scroll">About Me</a></li>
							<li><a href="#skills" class="scroll">Skills</a></li>
							<li><a href="#contact" class="scroll">Contact Me</a></li>
						</ul>
					</nav>
				</div>
				<div class="agile_search">
					<!-- cd-search -->
					<div class="cd-main-header">
						<ul class="cd-header-buttons">
							<li><a class="cd-search-trigger" href="#cd-search"> <span></span></a></li>
						</ul>
						<!-- cd-header-buttons -->
					</div>
					<div id="cd-search" class="cd-search agileinfo">
						<form action="/search" method="post">
							<input name="Search" type="search" placeholder="Click enter after typing...">
						</form>
					</div>
					<!-- //cd-search -->
				</div>
			</nav>

		</div>

		<div class="s1">
			<h3>Pathology</h3>
			<p>This is a simple question answering and recommender system on breast lesion.</p>
			<p>You can ask anything about breast cancer here. ^_^ </p>
			<p>But since our database is limited, you may not get what you want.</p>
			<div class="w3-button">
				<div class="w3ls-button">
					<a href="#contact" class="hvr-shutter-out-vertical">Contact Me</a>
				</div>
				<div class="clearfix"> </div>
			</div>

		</div>

		<div class="slides-box">
			<ul class="slides">
				<li style="background: url(static/images/banner2.jpg) center"></li>
				<li style="background: url(static/images/banner4.jpg) center"></li>
				<li style="background: url(static/images/banner1.jpg) center"></li>
				<li style="background: url(static/images/banner3.jpg) center"></li>
			</ul>
		</div>
	</div>
	<!-- /banner -->
<!-- about -->
	<div class="about" id="about">
		<div class="container">
			<h3 class="w3_head w3_head1">Details </h3>
			<p class="toppara">This is a breast cancer QA/recommender system based on knowledge graph, which uses the graph database Neo4j to deal with query faster. With basic natural language processing skills, the system can give an answer to the user's question. Since in this project I did not crawl large-scale data, the content of the database is very limited and the dataset mainly contains domestically produced old movies. So dear friends, don't be angry if you don't get the answer you want... </p>
			<div class="aboutgrids">
				<div class="col-md-6 aboutleft">
					<h4>Implementation Steps</h4>
					<div>1) Crawl movie data from www.douban.com and save the data to the mysql database. 
						2) Import mysql data into the neo4j database to build a knowledge graph. (Better to directly store the data in neo4j after crawling the data. Here I just wanted to get familiar with both of the two databases) 3) Do Chinese Word Segmentation and named entity recognition of user input statements. 4) Then classify user's question.
						5) According to the classification result, search the answer in the graph database.  
						6) As for the recommendation, I used node2vec to get node embeddings and calculated the similarity matrix.<br></div>

					<div class="about-inner">
						<div class="about-inner-top">
							<div class="col-md-2">
								<i class="fa fa-database" aria-hidden="true"></i>
							</div>
							<div class="col-md-10">
								<h4>Mysql Database</h4>
								<p>MySQL is a very popular relational database management system.
								   It has an advantage of easy operation and fast storage, but not as fast as non-relational databases.
								</p>
							</div>
							<div class="clearfix"></div>
						</div>
						<div class="about-inner-bottom">
							<div class="col-md-10">
								<h4>Neo4j graph database</h4>
								<p>Neo4j is a non-relational database that stores data as vertices and edges,
									and it's ideal for knowledge graph,<br> with efficient query performance.</p>
							</div>
							<div class="col-md-2">
								<i class="fa fa-database" aria-hidden="true"></i>
							</div>
							<div class="clearfix"></div>
						</div>
					</div>
				</div>
				<div class="col-md-6 aboutright">
					<img src="static/images/banner.png" alt="graph" align=right/  style="position:absolute; top:100px; ">
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
<!-- //about -->

<!-- services -->
	<div class="services" id="services">
		<div class="container">
			<h3 class="w3_head w3_head1">Input Here</h3>
			<p class="toppara">
				<b>（页面最右上角端也可以提问/搜索）</b><br>
				<b>在下方输入你的问题，会返回对应的答案以及相应的推荐<br>
				支持的问题实例有以下几种<br>“D腺肌上皮腺病发生在什么部位？”<br>“出现S淋巴细胞浸润可能为什么疾病？”<br>
				“出现S淋巴细胞浸润需要进行哪些检查”<br>
				“哪些疾病会发生在B上皮”<br>


			</p>
		</div>
		<div>
			<form action="/search" method="post" style=" text-align:center;">
				<p><textarea name="Search" clos="50" rows="5" ></textarea></p>
                <p><br></p>
				<p><button type="submit">Search</button></p>
				<p><br></p>
              </form>
		</div>
		<div class="agileits_services_grids_bottom">
			<div class="container">
				<div class="col-md-4 agileits_service_grid_btm_left">
					<div class="agileits_service_grid_btm_left1">

						<div class="agileits_service_grid_btm_left2">
							<h5>部分疾病名称 <span class="fa fa-suitcase"></span></h5>
							<p>BOWEN氏病，PAGET′S病，Paget's病，包裹性乳头状癌，错构瘤，导管癌，导管扩张症，导管原位癌，大汗腺癌，多发性导管内乳头状瘤，多发性平滑肌瘤，多发性纤维腺瘤，分叶状肿瘤，副乳腺囊性增生性纤维腺瘤，副乳腺增生症，富于细胞性纤维腺瘤，宫颈慢性炎，骨软骨瘤，化生性癌，基底细胞样型乳腺癌，浸润性癌，浸润性导管癌，浸润性导管乳腺癌，浸润性粘液腺癌，浸润性乳腺癌，浸润性小叶癌，浸润性腺癌，浆细胞性乳腺炎，良性分叶状肿瘤，良性叶状肿瘤，脉病，脉纤维瘤，弥漫大B细胞型恶性淋巴瘤，囊性增生病，囊性增生症，男性乳腺发育症，粘液型纤维腺瘤，粘液腺癌，派杰氏病，平滑肌瘤，肉芽肿性小叶性乳腺炎，乳头状瘤，乳头状微癌，乳腺癌，乳腺多发性导管内乳头状瘤，乳腺高级别导管原位癌，乳腺管状腺瘤，乳腺混合性粘液癌，乳腺浸润性导管癌，乳腺浸润性分泌性癌，乳腺浸润性小叶癌，乳腺浸润性腺癌，乳腺良性分叶状肿瘤，乳腺囊性增生，乳腺囊性增生病</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 agileits_service_grid_btm_left">
					<div class="agileits_service_grid_btm_left1">

						<div class="agileits_service_grid_btm_left2">
							<h5>部分症状名称<span class="fa fa-building"></span></h5>
							<p>癌，癌残留，癌化，癌累及，癌栓，癌细胞，癌灶，癌转移，癌组织，白体，病变，变性，玻璃样变，玻璃样变性，不典型，不典型增生，残留，衬覆，出血，大汗腺化生，大汗腺囊肿，点灶状，多发性，多灶浸润，反应，反应性，非典型，分化，分泌，分泌型，分泌型癌，分泌性，粉刺型，改变，感染，钙化，钙盐沉积，管状，核分裂象，混合型，混合性，坏死，化疗I-II度反应，化疗II度反应，化疗反应，活跃，积乳囊肿，积水，净，浸润，交界性，胶原化，假血管瘤样，见有，结节，聚积，聚集，溃疡，扩张，累及，累犯，鳞状，瘤，瘤细胞，滤泡囊肿，泌乳性，泌乳样，囊肿，粘液变，粘液分泌，脓肿，泡沫样，泡沫状，平滑肌分化，平滑肌样，破溃，普遍型，普通型，普通性，侵犯，轻度，切除净，切缘净，缺损，肉芽，肉芽肿，肉芽肿性炎，乳头样，乳头状，乳腺癌转移，乳腺纤维腺瘤样，色素痣，生长活跃，水肿，退变，退化，旺炽型，旺炽性，微乳头型，萎缩性，未见，未见病变</p>
						</div>
					</div>
				</div>
				<div class="col-md-4 agileits_service_grid_btm_left">
					<div class="agileits_service_grid_btm_left1">

						<div class="agileits_service_grid_btm_left2">
							<h5>部分IHC检查列表 <span class="fa fa-cubes"></span></h5>
							<p>α-Inhibin，Actin,HHF35，ALK1，ALK,D5F3，ALK,IA4，AACT，AFP，AR，Arginase，BCL-2，BCL-6，β-catenin，Bob-1，BRAF V600E，CA125，Calcitinon,CT，Calponin，Calretinin，Cathepsin K，CAM5.2,CK8,CK7，CEA，CDK4，CD1a，CD2，CD3，CD4，CD5，CD7，CD8，CD10，CD15，CD19，CD20，CD21，CD23，CD30，CD31，CD34，CD35，CD38，CD43，CD45,LCA，CD56，CD57，CD68,KP1，CD79α,CD79a，CD99，CD117，CD123，CD138，CD163，CDX2,CDX-2，CXCL-13,CXCL13，Chromogranin A,CgA，Collagen IV,COLLAGENIV，CK,AE1,AE3，CK5/6，CK7，CK8/18，CK14，CK19，CK20，CK,HMW，c-Myc，Cyclin D1，D2-40，Desmin，DOG-1，E-cadherin,E-cad,E-ca，EGFR，EGFRⅧ，EMA，ER，FLI-1，FVIII Ag，Fibronectin,FN，Galectin-3，GATA-3，GCDFP-15,GCDPF-15，GFAP，Granzyme-B</p>
						</div>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //services -->

<!-- team -->
	<div class="team" id="team">
		<div class="container">
			<h3 class="w3_head w3_head1">About Me</h3>
			<p class="toppara">
				朱智奎，信息工程学院<br>
				花了挺长时间来做这个project，收获还是有不少的,<br>
				爬虫，前端，后端，NLP, Graph Embedding全部摸了一遍.<br>
				不过问答功能还是非常受限的，我没有做word embedding，也没用deep learning<br>
				要想效果好还是得用非常大的语料库做embedding然后用LSTM提高分类效果<br>
				推荐系统部分只是初学，用的方法还比较简单<br>
				不过只要能在学习的过程中不断进步我就很满意啦！<br></p>
			<img src="static/images/mememe.jpg" />
		</div>
	</div>
<!-- team -->

<!-- coding skills -->
						<div class="w3ls_agile_circle_progress agile_info_shadow" id="skills">
							<div class="container">
								<div class="cir_agile_info ">
									<h3 class="w3_head w3_head1">KEY SKILLS </h3>
									<h4 align="center">key skills used in this project</h4>
										  <p align="center"><br>Python<br>
										  Mysql<br>Neo4j<br>javascript<br>css<br>WSGI<br>
										  Natural Language Processing<br>
										  Graph Embedding<br></p>

										
								</div>
							</div>
							</div>
						</div>
<!-- //coding skills --> 

<!-- contact -->
<div id="contact" class="contact">
	<div class="container">
		<div class="tittle-agileinfo">
			<h3 class="w3_head w3_head1">Contact Me </h3>
			<p class="toppara">欢迎微信/QQ/邮箱交流<br>Please email me at wutxtzhuzhikui@outlook.com </p>
	</div>
</div>
<!-- //contact -->


<!-- js -->
<script type="text/javascript" src="static/js/jquery-2.1.4.min.js"></script>

<!-- banner js -->
<script src="static/js/search.js"></script>
	<script src="static/js/poposlides.js">
	</script>
	<script>
		$(".slides").poposlides();
	</script>
<!-- //banner js -->

<!--pop-up-grid-->
		<div id="popup">
			<div id="small-dialog" class="mfp-hide">
				<div class="signin-form profile">
					<h3>Sign Up</h3>
					
					<div class="login-form">
						<form action="#" method="post">
							<input type="text" name="name" placeholder="Name" required="">
							<input type="email" name="email" placeholder="E-mail" required="">
							<input type="text" name="phone" placeholder="Phone number" required="">
							<input type="password" name="password" placeholder="Password" required="">
							<input type="password" name="password" placeholder="Confirm Password" required="">
							<input type="submit" value="Sign Up">
						</form>
					</div>
				</div>
			</div>
		</div>						
		<!--pop-up-grid-->
		<script src="static/js/jquery.magnific-popup.js" type="text/javascript"></script>
		<script>
			$(document).ready(function() {
				$('.popup-with-zoom-anim').magnificPopup({
					type: 'inline',
					fixedContentPos: false,
					fixedBgPos: true,
					overflowY: 'auto',
					closeBtnInside: true,
					preloader: false,
					midClick: true,
					removalDelay: 300,
					mainClass: 'my-mfp-zoom-in'
			});
																							
		});
		</script>




<!-- required-js-files-->
							<link href="static/css/owl.carousel.css" rel="stylesheet">
							    <script src="static/js/owl.carousel.js"></script>
							        <script>
							    $(document).ready(function() {
							      $("#owl-demo").owlCarousel({
							        items :3,
									itemsDesktop : [768,2],
									itemsDesktopSmall : [414,1],
							        lazyLoad : true,
							        autoPlay : true,
							        navigation :true,
									
							        navigationText :  false,
							        pagination : true,
									
							      });
								  
							    });
							    </script>
								 <!--//required-js-files-->


<!-- /circle-->
	 <script type="text/javascript" src="static/js/circles.js"></script>
					         <script>
								var colors = [
										['none', '#fd9426'], ['#fafafa', '#fc3158'],['#fafafa', '#53d769'], ['#fafafa', '#147efb']
									];
								for (var i = 1; i <= 7; i++) {
									var child = document.getElementById('circles-' + i),
										percentage = 30 + (i * 10);
										
									Circles.create({
										id:         child.id,
										percentage: percentage,
										radius:     80,
										width:      13,
										number:   	percentage / 1,
										text:       '%',
										colors:     colors[i - 1]
									});
								}
						
				</script>
	<!-- //circle -->

<script src="static/js/SmoothScroll.min.js"></script>
<!-- start-smoth-scrolling -->
<script type="text/javascript" src="static/js/move-top.js"></script>
<script type="text/javascript" src="static/js/easing.js"></script>
<script type="text/javascript">
	jQuery(document).ready(function($) {
		$(".scroll").click(function(event){		
			event.preventDefault();
			$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
		});
	});
</script>
<!-- start-smoth-scrolling -->
	<!-- here stars scrolling icon -->
	<script type="text/javascript">
		$(document).ready(function() {
			/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
				};
			*/
								
			$().UItoTop({ easingType: 'easeOutQuart' });
								
			});
	</script>

<!-- move to top-js-files -->
	<script type="text/javascript" src="static/js/move-top.js"></script>
	<script type="text/javascript" src="static/js/easing.js"></script>
<!-- //move to top-js-files -->


<script type="text/javascript" src="static/js/bootstrap.js"></script><!-- bootstrap js file -->

</body>
</html>